<template>
	<view class="navbar">
		<su-status-bar v-if="!sheep.$platform.inApp" :bgc="backgroundColor" />
		<view class="placeholder"></view>
		<view class="navbar" :style="{top:sheep.$platform.device.statusBarHeight + 'px',height:  '44px',backgroundColor:backgroundColor}">
			{{props.title}}
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';

	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		backgroundColor:{
			type:String,
			default:'transparent'
		}
	});
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.navbar {
		width: 100%;
		height: 44px;
		font-family: 思源黑体;
		font-size: 36rpx;
		font-weight: normal;
		line-height: 44px;
		color: #000000;
		text-align: center;
		position: fixed;
		top: 0;
		z-index: 100;
	}

	.placeholder {
		height: 44px;
	}

	.navbar-center {
		width: 100vw;
		position: fixed;
		top: 0;
		z-index: 100;
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: top;
		background-size: 100% !important;
	}
</style>